<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}" />
    <title>APK列表</title>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body>
<div class="app-page">
    <div class="app-page-header">
        <div class="page-title">
            <div class="title">APK列表</div>
            <div class="btn-group">
                <a class="z-btn z-primary" th:href="@{/deviceUpgrade/goAddApk}">新增</a>
            </div>
        </div>
    </div>
    <div class="app-page-content">
        <div class="app-card">
            <div class="app-card-body">
                <table class="z-table">
                    <thead>
                        <th>apk名称</th>
                        <th>上传时间</th>
                        <th>版本名称</th>
                        <th>版本号</th>
                        <th>适用机型</th>
                        <th>大小(MB)</th>
                        <th>是否升级</th>
                        <th>操作</th>
                    </thead>
                    <tbody>
                    <tr th:each="apk: ${apkList}" th:attr="data-id=${apk.deviceUpgradeId},data-name=${apk.name},data-version-code=${apk.versionCode},data-model=${apk.model},
                        data-size=${apk.size},data-software-version-description=${apk.softwareVersionDescription},data-url=${apk.url}">
                        <td>
                            <a class="btn-detail" th:text="${apk.name}"></a>
                        </td>
                        <td th:text="${apk.updateTime}"></td>
                        <td th:text="${apk.versionName}"></td>
                        <td th:text="${apk.versionCode}"></td>
                        <td th:text="${apk.model}"></td>
                        <td th:text="${apk.size}"></td>
                        <div th:switch="${apk.active}">
                            <td th:case="'1'"></i>是</td>
                            <td th:case="'0'"></i>否</td>
                        </div>
                        <td class="btn-group">
                            <a class="btn-upgrade" th:href="@{/deviceUpgrade/goUpgradeApk(deviceUpgradeId=${apk.deviceUpgradeId})}">升级</a>
                            <a th:href="@{/deviceUpgrade/apkDeviceList(deviceUpgradeId=${apk.deviceUpgradeId})}">寄存mips</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <!-- 分页信息 -->
                <div class="app-card-body">
                    <!-- 前端分页 -->
                    <div class="pagination z-pat z-fr"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- apk详情 -->
<div class="popup-detail popup-default z-popup z-fixed z-df z-flex-cc z-hide">
    <div class="bg" data-popup-close></div>
    <div class="body">
        <div class="title">apk详情</div>
        <div class="content">
            <form>
                <div class="form-item row">
                    <div class="label">
                        <label>apk名称</label>
                    </div>
                    <div class="body">
                        <input type="text" name="name" readonly>
                    </div>
                </div>
                <div class="form-item row">
                    <div class="label">
                        <label>版本号</label>
                    </div>
                    <div class="body">
                        <input type="text" name="versionCode" readonly>
                    </div>
                </div>
                <div class="form-item row">
                    <div class="label">
                        <label>适用机型</label>
                    </div>
                    <div class="body">
                        <input type="text" name="model" readonly>
                    </div>
                </div>
                <div class="form-item row">
                    <div class="label">
                        <label>大小(MB)</label>
                    </div>
                    <div class="body">
                        <input type="text" name="size" readonly>
                    </div>
                </div>
                <div class="form-item row">
                    <div class="label">
                        <label>软件版本说明</label>
                    </div>
                    <div class="body">
                        <input type="text" name="softwareVersionDescription" readonly>
                    </div>
                </div>
                <div class="form-item row">
                    <div class="label">
                        <label>下载地址</label>
                    </div>
                    <div class="body">
                        <input type="text" name="url" readonly>
                    </div>
                </div>
            </form>
            <div class="z-btn-group">
                <a class="z-btn z-primary" data-popup-close>返回</a>
            </div>
        </div>
    </div>
</div>

<!-- apk升级 -->
<div class="popup-upgrade popup-default z-popup z-fixed z-df z-flex-cc z-hide">
    <div class="bg" data-popup-close></div>
    <div class="body">
        <div class="title">apk升级</div>
        <div class="content">
            <form>
                <div class="form-item row">
                    <div class="label">
                        <label>升级包地址</label>
                    </div>
                    <div class="body">
                        <input type="text" name="url">
                    </div>
                </div>
                <div class="form-item row" style="align-items:start;">
                    <div class="label">
                        <label>软件版本说明</label>
                    </div>
                    <div class="body">
                        <textarea name="softwareVersionDescription"></textarea>
                    </div>
                </div>
            </form>
            <div class="z-btn-group">
                <a class="btn-submit z-btn z-primary">升级</a>
                <a class="z-btn z-default" data-popup-close>取消</a>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script>
    //获取context path
    var context = $("meta[name='ctx']").attr("content") || '';

    var currentData;

    //apk详情
    $('.btn-detail').click(function (params) {
        var data = $(this).parents('tr')[0].dataset;
        // 赋值
        $('.popup-detail').formLoad({
            name: data.name,
            versionCode: data.versionCode,
            model: data.model,
            size: data.size,
            softwareVersionDescription: data.softwareVersionDescription,
            url: data.url
        })
        popup.open('.popup-detail');
    })

    // 升级
    $('.btn-upgrade').click(function (params) {
        currentData = $(this).parents('tr')[0].dataset;
        popup.open('.p opup-upgrade');
    })

    // 升级 -确认
    // 保存
    var form = $(".popup-upgrade").form({
        submitSelector: ".popup-upgrade .btn-submit",
        msg: function (msg) {
            popup.tipsTop(msg, 'warning');
        },
        submit: function () {

            var data = {};

            $.each($(".popup-upgrade form").serializeArray(), function (index, field) {
                if (data[field.name]) {
                    data[field.name] += "," + field.value;
                } else {
                    data[field.name] = field.value;
                }
            })

            console.log('提交的数据');
            console.log(data);

            // 升级成功
            popup.tipsTop('升级成功', 'success');

            // 升级失败
            // popup.tipsTop('升级失败', 'success');
        }
    })
    //处理分页
    var pageNum =  [[${pageNum}]];
    var pageSize = [[${pageSize}]];
    var total = [[${total}]];
    var pagination = new Pagination(".pagination", {
        pageIndex: pageNum, // 当前页数
        pageSize: pageSize, // 每页数量
        count: total, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function(pageIndex) {
            window.location.href = context + "/deviceUpgrade/apkList?pageNum=" + pageIndex + "&pageSize=" + pageSize;
        }
    })
</script>
</body>

</html>